<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <h1>学生信息</h1>
  <h3>{{c.gradeLevel}}{{c.name}}  班主任：{{c.teacherName}}</h3>
  <input type="text" placeholder="姓名" v-model="s.name">
  <input type="text" placeholder="年龄" v-model="s.age">
  <input type="text" placeholder="性别" v-model="s.gender">
  <input type="button" value="添加学生" @click="insert()">
  <table border="1">
    <caption>学生列表</caption>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
    <tr v-for="(stu,i) in arr">
      <td>{{i+1}}</td>
      <td>{{stu.name}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.gender}}</td>
      <td><a href="javascript:void(0)" @click="del(stu.id)">删除</a></td>
    </tr>
  </table>

</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script>
  let v = new Vue({
    el:"body>div",
    data:{
      c:{
        name: "",
        teacherName: "",
        gradeLevel: ""
      },
      s:{
        name:"",
        age:"",
        gender:"",
        classId:""
      },
      arr:[]
    },
    methods:{
      insert(){
        // 从地址栏中取出id的值  并赋值给学生对象
        v.s.classId = new URLSearchParams(location.search).get("id");
        // 发出添加学生的异步请求
        axios.post("/student/insert",v.s).then(function () {
          location.reload();
        })
      },
      del(id) {
        if (confirm("确认删除？")){
          axios.post("/student/delete?id="+id).then(function () {
            location.reload();
          })
        }
      }
    },
    created:function () {
      // 通过id查询班级详情
      axios.get("/class/selectById"+location.search).then(function (response) {
        v.c = response.data;
      })
      // 通过班级id查询学生
      axios.get("student/selectByCid"+location.search).then(function (response) {
        v.arr = response.data;
      })
    }
  })

</script>
</body>
</html>